<template>
	<view class="launch" v-if="isFirstLaunch">
		<image src="https://siha.vxmeng.com/static/index/circle.gif" mode="widthFix"></image>
		<image src="https://siha.vxmeng.com/static/index/launch-logo.png" mode="widthFix"></image>
	</view>
	<view class="index" v-else>
		<view class="swiper">
			<view class="swiper-item">
				<!-- <image :src="getImg(episodeInfo.image)" mode="widthFix"></image> -->
				<!-- #ifdef MP-WEIXIN -->
				<video :enable-play-gesture="true" :muted="true" object-fit="cover" poster="https://siha.vxmeng.com/static/shu.jpg" :src="systemVideo.file" :autoplay="true" style="width: 100%;height: 100%;"
					:controls="false" :loop="true">
				<!-- #endif -->
				<!-- #ifdef MP-TOUTIAO -->
				
				<video-player @error="videoError" :resource-id="systemVideo.resource_id+''" :seq-id="systemVideo.seq_id+''" cloud-type="1" :enable-play-gesture="true" :muted="true" object-fit="cover" poster="https://siha.vxmeng.com/static/shu.jpg" :src="systemVideo.file" :autoplay="true" style="width: 100%;height: 100%;"
					:controls="false" :loop="true">
				</video-player>
				<!-- #endif -->
				<!-- #ifndef MP-WEIXIN || MP-TOUTIAO -->
				<video :enable-play-gesture="true" object-fit="cover" poster="https://siha.vxmeng.com/static/shu.jpg" :src="getImg(systemVideo.file)" :autoplay="true" style="width: 100%;height: 100%;"
					:controls="false" :loop="true">
				<!-- #endif -->
					<!-- #ifdef MP-WEIXIN || MP-TOUTIAO -->
					<template v-if="isPop">
<!-- 						<view class="ripple startBtn">
							<view class="ripple-container startBtn"></view>
						</view>
						<image @click="toSiha" class="siha element startBtn" src="https://siha.vxmeng.com/static/index/siha.png"
							mode="widthFix"></image> -->
						<image @click="toSiha" src="https://siha.vxmeng.com/static/index/bing.gif" class="siha element startBtn" mode="widthFix"></image>
						<image @click="toSiha" src="https://siha.vxmeng.com/static/index/siha-text.png" class="siha1 element startBtn" mode="widthFix"></image>
						<image @click="toSiha" class="shou element2 startBtn" src="https://siha.vxmeng.com/static/index/shou.gif"
							mode="widthFix"></image>
						<image @click="toSiha" class="startView element startBtn" src="https://siha.vxmeng.com/static/index/start_view.png"
							mode="widthFix"></image>
					</template>
					
					<view class="moneyBox">
						<view class="box">
							<image class="l" src="https://siha.vxmeng.com/static/index/dou.png" mode="widthFix"></image>
							<text @click="comLink('/pages/my/rechangeRecord')" class="m">{{parseInt(userinfo.money)}}</text>
							<!-- <text class="r" @click="isPay = true">+</text> -->
							<view class="r" @click="isPay = true">
								<image src="https://siha.vxmeng.com/static/index/jia.png" mode="widthFix"></image>
							</view>
							<view class="balance-change" v-if="isObtain">+{{ changeAmount }}</view>
						</view>
					</view>

					<view class="list" v-if="isPop">
						<view class="item" @click="comLink('/pages/index/activity')">
							<image src="https://siha.vxmeng.com/static/index/1.png" mode="widthFix"></image>
							<view>{{$t('index.hd')}}</view>
						</view>
						<view class="item" @click="comLink('/pages/index/episode?episode_script_id='+episodeInfo.id)">
							<image
								src="https://siha.vxmeng.com/static/index/2.png" mode="widthFix"></image>
							<view>{{$t('index.zhangjie')}}</view>
						</view>
						<view class="item" @click="comLink('/pages/index/shop')">
							<image style="width: 26px;margin-bottom: 5px;" src="https://siha.vxmeng.com/static/index/daoju.png" mode="widthFix"></image>
							<view>{{$t('index.dj')}}</view>
						</view>
						<!-- #ifndef MP-TOUTIAO -->
						
						<view class="item" @click="comLink('/pages/index/rankList?episode_script_id='+episodeInfo.id)">
							<image
								src="https://siha.vxmeng.com/static/index/3.png" mode="widthFix"></image>
							<view>{{$t('index.paihang')}}</view>
						</view>
						<!-- #endif -->
						<!-- #ifdef H5 -->
						<view class="item" @click="messageFun('share')">
							<image src="https://siha.vxmeng.com/static/index/4.png" mode="widthFix"></image>
							<view>{{$t('index.fenxiang')}}</view>
						</view>
						<!-- #endif -->
						<!-- #ifndef H5 -->
						<view class="item">
							<button class="share" open-type="share">
								<image src="https://siha.vxmeng.com/static/index/4.png" mode="widthFix"></image>
								<view>{{$t('index.fenxiang')}}</view>
							</button>
						</view>
						<!-- #endif -->
					</view>
				
					<view class="logo">
						<image class="logo-img" src="https://siha.vxmeng.com/static/index/logo.png" mode="widthFix"></image>
						<view class="name">{{episodeInfo.name}}</view>
					</view>
					
					<!-- #endif -->
					<!-- #ifndef MP-WEIXIN || MP-TOUTIAO-->
					<template v-if="isPop">
<!-- 						<cover-view class="ripple">
							<cover-view class="ripple-container"></cover-view>
						</cover-view> -->
						<cover-image @click="toSiha" style="height: 267px;bottom: 70px;left: 50%;transform: translate(-50%,-45px);"
							src="https://siha.vxmeng.com/static/index/bing.gif" class="siha element startBtn" mode="widthFix"></cover-image>
						<cover-image @click="toSiha" style="height: 58px;bottom: 172px;left: 50%;transform: translate(-50%,-45px);"
							src="https://siha.vxmeng.com/static/index/siha-text.png" class="siha1 element startBtn" mode="widthFix"></cover-image>
						<cover-image @click="toSiha" style="height: 75px;right: calc(50% - 42px);transform: translate(50%,-90px);" class="shou element2 startBtn" 
							src="https://siha.vxmeng.com/static/index/shou.gif" mode="widthFix"></cover-image>
						<cover-image @click="toSiha" style="height: 24px;bottom: 124px;left: 50%;transform: translate(-50%,-45px);"
							src="https://siha.vxmeng.com/static/index/start_view.png" class="startView element startBtn"mode="widthFix"></cover-image>
					</template>
					
					<cover-view class="moneyBox">
						<cover-view class="box">
							<cover-image class="l" src="https://siha.vxmeng.com/static/index/dou.png" mode="widthFix">
							</cover-image>
							<cover-view @click="comLink('/pages/my/rechangeRecord')" class="m">{{parseInt(userinfo.money)}}</cover-view>
							<!-- <cover-view class="r" @click="isPay = true">+</cover-view> -->
							<cover-view class="r" @click="isPay = true">
								<cover-image src="https://siha.vxmeng.com/static/index/jia.png" mode="widthFix" style="height: 34rpx;width: 34rpx;"></cover-image>
							</cover-view>
							<cover-view class="balance-change" v-if="isObtain">+{{ changeAmount }}</cover-view>
						</cover-view>
					</cover-view>
					
					<cover-view class="list" v-if="isPop">
						<cover-view class="item">
							<cover-image @click="comLink('/pages/index/activity')" src="https://siha.vxmeng.com/static/index/1.png" mode="widthFix"></cover-image>
							<cover-view>{{$t('index.hd')}}</cover-view>
						</cover-view>
						<cover-view class="item">
							<cover-image @click="comLink('/pages/index/episode?episode_script_id='+episodeInfo.id)" src="https://siha.vxmeng.com/static/index/2.png" mode="widthFix"></cover-image>
							<cover-view>{{$t('index.zhangjie')}}</cover-view>
						</cover-view>
						<cover-view class="item">
							<cover-image @click="comLink('/pages/index/shop')" style="width: 26px;height: 26px;;margin-bottom: 5px;"
								src="https://siha.vxmeng.com/static/index/daoju.png" mode="widthFix"></cover-image>
							<cover-view>{{$t('index.dj')}}</cover-view>
						</cover-view>
						<cover-view class="item">
							<cover-image @click="comLink('/pages/index/rankList?episode_script_id='+episodeInfo.id)" src="https://siha.vxmeng.com/static/index/3.png" mode="widthFix"></cover-image>
							<cover-view>{{$t('index.paihang')}}</cover-view>
						</cover-view>
						<!-- #ifdef H5 -->
						<cover-view class="item">
							<cover-image @click="messageFun('share')" src="https://siha.vxmeng.com/static/index/4.png" mode="widthFix"></cover-image>
							<cover-view>{{$t('index.fenxiang')}}</cover-view>
						</cover-view>
						<!-- #endif -->
						<!-- #ifndef H5 -->
						<cover-view class="item">
							<button class="share" open-type="share">
								<cover-image src="https://siha.vxmeng.com/static/index/4.png" mode="widthFix"></cover-image>
								<cover-view>{{$t('index.fenxiang')}}</cover-view>
							</button>
						</cover-view>
						<!-- #endif -->
					</cover-view>
					
					<cover-view class="logo">
						<cover-image class="logo-img" src="https://siha.vxmeng.com/static/index/logo.png" mode="widthFix">
						</cover-image>
						<cover-view class="name">{{episodeInfo.name}}</cover-view>
					</cover-view>
					<!-- #endif -->
					
					
				</video>
				<!-- <view class="start element2" @click="comLink('/pages/index/siha?id='+episodeInfo.episode_info_id)">
					<text>{{$t('index.ksgk')}}</text>
				</view> -->
			</view>
			
<!-- 			<view class="mc" v-if="userGive.is_give==1">
				<view class="giftPop">
					<view class="top">
						<image src="https://siha.vxmeng.com/static/index/butterfly.png" mode="widthFix"></image>
						<view class="top-content">
							<view>{{$t('index.sihasiha')}}！</view>
							<view>{{$t('index.xyhscjr')}}</view>
						</view>
					</view>
					
					<view class="cen">
						<view class="item">
							<view class="tit">
								<image src="https://siha.vxmeng.com/static/index/left.png" mode="widthFix"></image>
								<text>{{$t('index.cdsddl')}}!!!</text>
								<image src="https://siha.vxmeng.com/static/index/rig.png" mode="widthFix"></image>
							</view>
							<view class="info">
								<view class="box">
									<image src="https://siha.vxmeng.com/static/index/dou.png" mode="widthFix"></image>
									<view class="num">{{$t('index.sidou')}}X{{userGive.give_money}}</view>
								</view>
							</view>
						</view>
					</view>
					<view class="btns">
						<text @click.stop="Receive">{{$t('index.yjlq')}}</text>
					</view>
				</view>
			</view> -->
		</view>
		<comReward v-if="isObtain"></comReward>
		<comPay v-if="isPay" @hidePay="hidePay"></comPay>
		<!-- #ifdef MP-WEIXIN || MP-TOUTIAO || MP-ALIPAY -->
			<comLack v-if="isLack" @hide="hideLack" ></comLack>
		<!-- #endif -->
		<!-- <tabBar></tabBar> -->
	</view>
</template>
<script>
	export default {
		data() {
			return {
				isFirstLaunch: false,
				changeAmount:'',
				isNewUser: false, //是否是新用户
				isObtain: false, //是否获得嘶豆
				timer: null,
				isPay: false,
				isLack: false,
				isPop: true,
				episodeInfo: {},
				systemVideo: {},
				userinfo:{},
				userGive:{},
			};
		},		
		onLoad(){
			console.log(this.$music.bgmInstance);
			this.isFirstLaunch = this.$tools.getStore('isFirstLaunch')
			if(this.isFirstLaunch){
				uni.hideTabBar()
				setTimeout(()=>{
					this.isFirstLaunch = false
					uni.showTabBar()
					this.$tools.setStore('isFirstLaunch', false);
				}, 3000)
			}

			// #ifdef H5
			let token = uni.getStorageSync("token");
			if (token){
				this.messageFun('token',token)
			}
			// #endif
		},
		onReady(){
			if(this.isNewUser){
				setTimeout(this.$music.play_confirm, 0)
			}
			this.getSystemVideo()
			console.log(this.$music.bgmInstance);
		},
		onShow() {
			setTimeout(()=>{
				console.log(uni.getStorageSync('token'));
				if(this.$tools.getStore('share_dou')){
					this.$music.play_obtain();
					this.isObtain = true;
					this.changeAmount = 10000;
					clearTimeout(this.timer);
					this.timer = setTimeout(()=>{
						this.isObtain = false;
						// this.userinfo.money = Number(this.changeAmount) + Number(this.userinfo.money);
					}, 1500);
					this.$tools.setStore('share_dou', false)
				}
				
				this.getEpisodeInfo()
				this.getUserinfo()
				// this.getUserGive()
			}, 1000)
			this.$music.play_bgm()
			// #ifdef MP-WEIXIN
			uni.$on('click', this.$music.play_click_1())
			// #endif
			
			this.isPop = true
		},
		// onShareAppMessage(option) {
		// 	console.log(option);
		// 	// if(option.target.hasOwnProperty('dataset') && option.target.dataset.lack){
		// 	// 	console.log('缺豆了！！！！！！！！！！！！！！！！！！！！！！！！！！！');
		// 	// }
		// },
		// //分享到朋友圈
		// onShareTimeline() {
		// 	return {
		// 		title: '嘶哈嘶哈',
		// 		path: '/pages/index/index',
		// 		imageUrl: 'https://siha.vxmeng.com/static/logo.png'
		// 	}			
		// },
		methods: {
			
			videoError(e){
				console.log(e)
			},
			hideLack(){
				this.isLack = false
			},
			hidePay(e){
				this.isPay=false
				if(e == 1){
					this.isLack = true
				}else{
					this.getUserinfo()
				}
			},
			async getUserGive() {
				const res = await this.$myRequest({
					url: 'api/user/getUserGive',
					data: {}
				})
				if (res.code == 1) {
					console.log(res)
					this.userGive = res.data
				}
			},
			// async doAddRegGiveMoney() {
			// 	const res = await this.$myRequest({
			// 		url: 'api/user/doAddRegGiveMoney',
			// 		data: {}
			// 	})
			// 	if (res.code == 1) {
			// 		console.log(res)
			// 	}
			// },
			async Receive() {
				const res = await this.$myRequest({
					url: 'api/user/doAddRegGiveMoney',
					data: {}
				})
				if (res.code == 1) {
					console.log(res)
					this.$music.play_obtain()
					this.isNewUser = false;
					this.isObtain = true;
					this.changeAmount = 10000;
					setTimeout(()=>{
						this.isObtain = false;
					}, 1500)
					this.getUserGive()
					this.getUserinfo()
				}
			},
			async getUserinfo() {
				const res = await this.$myRequest({
					url: 'api/user/index',
					data: {}
				})
				if (res.code == 1) {
					console.log(res)
					this.userinfo = res.data
				}
			},
			async getSystemVideo() {
				const res = await this.$myRequest({
					url: 'api/system/getSystemVideo',
					data: {
						source: 1,
					}
				})
				if (res.code == 1) {
					console.log(res)
					this.systemVideo = res.data
				}
			},
			toSiha() {
				this.$music.play_confirm_2()
				// #ifdef MP-WEIXIN
				if (this.episodeInfo.video_type == 2) {
					this.comLink('/pages/index/siha?id=' + this.episodeInfo.episode_info_id)
				} else {
					this.comLink('/pages/index/siha2?id=' + this.episodeInfo.episode_info_id)
				}
				// #endif
				// #ifndef MP-WEIXIN
				this.comLink('/pages/index/siha_dy?id=' + this.episodeInfo.episode_info_id)
				// #endif
				
			},
			async getEpisodeInfo() {
				const res = await this.$myRequest({
					url: 'api/episode/getEpisodeInfo',
					data: {
						source: 1,
					}
				})
				if (res.code == 1) {
					this.episodeInfo = res.data
				}
			},
		}
	}
</script>
<style lang="less" scoped>
	/* 定义关键帧 */
	// @keyframes move {
	// 	0% {
	// 		right: 50%;
	// 		bottom: calc(100vh - 200rpx);
	// 	}

	// 	75% {
	// 		right: 50%;
	// 		bottom: 160rpx;
	// 	}

	// 	100% {
	// 		right: 10rpx;
	// 		bottom: 160rpx;
	// 	}
	// }
	.element {
		animation-name: move;
		animation-duration: 3s;
		animation-timing-function: ease;
	}

	// @keyframes move2 {
	// 	0% {
	// 		opacity: 0;
	// 	}

	// 	75% {
	// 		opacity: 0;
	// 	}

	// 	100% {
	// 		opacity: 1;
	// 	}
	// }
	.element2 {
		animation-name: move2;
		animation-duration: 3s;
		animation-timing-function: ease;
	}
	
	// 开始嘶哈往上移
	.startBtn{
		transform: translateY(-90rpx);
		&.ripple-container{
			transform: translateY(-100rpx);
		}
	}

	.index {
		height: 100vh;
		/* #ifdef H5 */
		height: calc(100vh - 100rpx);
		/* #endif */
		background-color: #000;

		.swiper {
			width: 100%;
			height: 100%;

			.swiper-item {
				width: 750rpx;
				height: 100%;
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;

				.ripple {
					position: fixed;
					width: 220rpx;
					height: 220rpx;
					right: 260rpx;
					bottom: 200rpx;
					flex-shrink: 0;
					transform: scale(0.9);
					/* #ifdef MP-TOUTIAO */
					bottom: 40rpx;
					/* #endif */
				}

				.ripple-container {
					position: absolute;
					border: 2rpx solid rgba(66, 40, 181);
					box-sizing: border-box;
					border-radius: 50%;
					animation: ripple-animation 1s infinite;
				}

				@keyframes ripple-animation {
					0% {
						width: 100rpx;
						height: 100rpx;
						top: calc(50% - 50rpx);
						left: calc(50% - 50rpx);
						opacity: 1;
					}

					100% {
						width: 100%;
						height: 100%;
						top: 0;
						left: 0;
						// opacity: 0;
					}
				}

				image,cover-image {
					width: 100%;
					height: 100%;
				}

				.start {
					/* 蓝色渐变 */
					position: fixed;
					right: 50rpx;
					bottom: 200rpx;
					// width: 356rpx;
					height: 112rpx;
					border-radius: 900rpx;
					background: linear-gradient(89deg, rgba(#3D6BC7, 0.6) 7%, rgba(61, 136, 255, 0) 91%);
					display: flex;
					align-items: center;
					font-size: 40rpx;
					color: #fff;
					font-weight: 500;
					padding-left: 40rpx;
					padding-right: 150rpx;
					box-sizing: border-box;
				}

				.siha {
					position: fixed;
					// width: 220rpx;
					height: 240rpx;
					// right: 260rpx;
					// bottom: 182rpx;
					flex-shrink: 0;
					z-index: 100;
					width: 400rpx;
					bottom: 40rpx;
					right: 170rpx;
					/* #ifdef MP-TOUTIAO */
					bottom: -82rpx;
					/* #endif */
				}
				.siha1{
					position: fixed;
					height: 240rpx;
					flex-shrink: 0;
					z-index: 100;
					bottom: 248rpx;right: 284rpx;width: 172rpx;
					/* #ifdef MP-TOUTIAO */
					bottom: 130rpx;
					/* #endif */
				}
				.shou {
					position: fixed;
					width: 150rpx;
					// height: 100rpx;
					right: 220rpx;
					bottom: 160rpx;
					flex-shrink: 0;
					z-index: 100;
					/* #ifdef MP-TOUTIAO */
					bottom: 40rpx;
					/* #endif */
				}

				.sbw {
					position: fixed;
					width: 212rpx;
					height: 212rpx;
					right: 265rpx;
					bottom: 194rpx;
					flex-shrink: 0;
					z-index: 100;
					/* #ifdef MP-TOUTIAO */
					bottom: 34rpx;
					/* #endif */
				}

				.startView {
					position: fixed;
					width: 170rpx;
					height: 40rpx;
					bottom: 150rpx;
					right: 290rpx;
					flex-shrink: 0;
					z-index: 100;
					/* #ifdef MP-TOUTIAO */
					bottom: 0rpx;
					/* #endif */
				}
			}
			
			.mc{
				position: fixed;
				top: 0;
				left: 0;
				width: 100vw;
				height: 100vh;
				background-color: rgba(0, 0, 0, .8);
				z-index: 101;
				.giftPop{
					position: absolute;
					width: 600rpx;
					height: 540rpx;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -40%);
					background: url('https://siha.vxmeng.com/static/index/gift-bg.png') no-repeat;
					background-size: cover;
					border-radius: 0 0 30rpx 30rpx;
					
					image,cover-image{
						width: 100%;
						position: absolute;
						top: 0;
						left: 0;
					}		
					.top{
						width: 500rpx;
						height: 200rpx;
						border-radius: 20rpx;	
						position: absolute;
						top: -60rpx;
						left: 50%;
						transform: translateX(-50%);
						background: linear-gradient(127deg, #BBDFFA 12%, #9ED1F8 33%, #5855E8 108%);
						image,cover-image{
							width: 50%;
							position: absolute;
							left: 270rpx;
							top: 10rpx;
						}
						.top-content{
							display: flex;
							flex-direction: column;
							margin: 20rpx 0;
							view,cover-view{
								position: absolute;
								left: 25rpx;
								top: 20rpx;
								margin: 10rpx 0;
								font-size: 44rpx;
								color: #307EFE;
								&:nth-child(2){
									height: 40rpx;
									padding: 0 16rpx;
									box-sizing: border-box;
									font-size: 24rpx;
									color: #fff;
									top: 100rpx;
									border-radius: 20rpx;
									background: linear-gradient(99deg, rgba(48, 126, 254, 0.7569) 6%, #D614FF 119%);
								}
							}		
						}
					}
					.cen{
						padding: 0 50rpx;
						height: 400rpx;
						width: 100%;
						box-sizing: border-box;
						position: absolute;
						top: 180rpx;
						.item{
							color: #fff;
							.tit{
								display: flex;
								justify-content: center;
								align-items: center;
								image,cover-image{
									width: 60rpx;
									position: static;
								}
								text,cover-view{
									margin: 16rpx;
								}
							}
							.info{
								position: relative;
								width: 100%;
								height: 140rpx;
								.box{
									height: 140rpx;
									border-radius: 30rpx;
									background: linear-gradient(180deg, #6B15AA 0%, #5315B8 100%);
									overflow: hidden;
									box-sizing: border-box;
									image,cover-image{
										width: 120rpx;
										top: 14rpx;
										left: 110rpx;
										z-index: 1;
									}
									.num{
										position: absolute;
										top: 68rpx;
										left: 180rpx;
										background: linear-gradient(90deg, #FFB400 12%, rgba(216, 216, 216, 0) 99%);
										font-size: 30rpx;
										box-sizing: border-box;
										padding: 0 40rpx;
										border-image: linear-gradient(89deg, rgba(247, 224, 150, 0.8) -9%, rgba(216, 216, 216, 0) 95%) ;
									}
								}
								.lef,.rig{
									width: 46%;
									margin: 0 10rpx;
									float: left;
									image,cover-image{
										height: 50rpx;
										position: static;
										width: 60rpx;
										margin: 25rpx 0;
										margin-left: 78rpx;
									}
									.num{
										height: 34rpx;
										position: static;
										background: #5855E8;
										font-size: 24rpx;
										text-align: center;
									}
								}
								.lef{
									image,cover-image{
										height: 80rpx;
										margin: 10rpx 0;
										margin-left: 78rpx;
									}
								}
							}
						}
					}
				
					.btns{
						width: 100%;
						position: absolute;
						bottom: 30rpx;
						display: flex;
						justify-content: space-evenly;	
						margin: 10rpx 0;
						
						text,cover-view {
							display: inline-flex;
							width: 250rpx;
							height: 60rpx;
							border: 1px solid #AAAAAA;
							border-radius: 50rpx;
							align-items: center;
							justify-content: center;
							font-size: 32rpx;
							color: #fff;
							box-sizing: border-box;
						
							&:nth-child(2) {
								background: linear-gradient(270deg, rgba(95, 88, 253, 0.95) 0%, rgba(98, 182, 252, 0.95) 100%), linear-gradient(195deg, rgba(237, 115, 219, 0.95) 22%, rgba(239, 93, 98, 0.95) 77%);
								color: #fff;
								border: none;
							}
						}
					}
				}
			}
		}
		
		.moneyBox{
			width: 100%;
			height: 66rpx;
			display: flex;
			justify-content: flex-end;
			position: fixed;
			top: 200rpx;
			/* #ifdef MP-TOUTIAO */
			top: 100rpx;
			/* #endif */
			right: 0;
			.box{
				width: 240rpx;
				// height: 38rpx;
				background: rgba(#FFFFFF,0.1);
				border-radius: 50rpx 0 0 50rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding:5rpx 10rpx 5rpx 66rpx;
				position: relative;
				.l{
					width: 66rpx;
					position: absolute;
					left: 0;
				}
				.m{
					font-size: 32rpx;
					color: #fff;
					font-weight: 400;
				}
				.r{
					// display: inline-flex;
					// align-items: center;
					// justify-content: center;
					// color: #fff;
					width: 54rpx;
					height: 38rpx;
					border-radius: 19rpx;
					// font-size: 50rpx;
					// line-height: 38rpx;
					/* 排行榜-第一底色 */
					background: linear-gradient(270deg, #FFCC00 0%, #FF9D00 100%);
					display: flex;
					align-items: center;
					justify-content: center;
					image{
						width: 34rpx;
					}
				}
				.balance-change {
					position: absolute;
					top: -30rpx;
					width: 100%;
					padding-right: 30rpx;
				  text-align: center;
				  font-size: 18px;
				  color: #fff;
					animation: balanceChangeAnimation 1.5s forwards;
				}
				@keyframes balanceChangeAnimation {
				  0% {
				    opacity: 1;
				    transform: translateY(0);
				  }
				  100% {
				    opacity: 0;
				    transform: translateY(-80rpx);
				  }
				}
			}
		}

		.list {
			position: fixed;
			right: 30rpx;
			top: 400rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			z-index: 100;
			.item,
			.share {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				color: #fff;
				margin-top: 50rpx;
				border: none;
				view,cover-view{
					/* #ifndef H5 */
					margin-top: 20rpx;
					/* #endif */
				}
				&::after {
					border: none;
				}

				image,cover-image {
					width: 64rpx;
					height: 64rpx;
				}
			}

			.share {
				margin: 0;

				view,cover-view {
					margin-top: -12rpx;
				}
			}
		}
		.logo{
			position: absolute;
			top: 124rpx;
			left: 30rpx;
			.logo-img{
				width: 180rpx !important;
				height: 60rpx;
				margin-left: 20rpx;
			}
			view,cover-view{
				padding: 0 24rpx;
				height: 64rpx;
				border-radius: 32rpx;
				border: 2rpx solid rgba(255, 255, 255, 0.3);
				text-align: center;
				line-height: 60rpx;
				color: #fff;
				font-size: 28rpx;
				margin-top: 20rpx;
			}
		}
	}
	.launch{
		width: 100vw;
		height: 100vh;
		background-color: #fff;
		position: relative;
		image{
			width: 28%;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -97%);
			&:nth-child(2){
				width: 25%;
				transform: translate(-50%, -75%);
			}
		}
	}
</style>